/******************** 变量 ********************/
$lv-btn-type-link-border-color: transparent !default;
$lv-btn-type-default-bg-color: transparent !default;
$lv-btn-dangerous-bg-color: transparent !default;

// 默认按钮
$lv-btn-default-color: (default, $border-color-secondary, transparent, $text-color), (hover, $primary-color, transparent, $primary-color),
  (active, $primary-color-active, transparent, $lv-btn-default-text-color-active),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

// 主按钮
$lv-btn-primary-color: (default, $primary-color, $primary-color, $lv-btn-primary-text-color),
  (hover, $primary-color-hover, $lv-btn-primary-bg-color-hover, $lv-btn-primary-text-color),
  (active, $primary-color-active, $lv-btn-primary-bg-color-active, $lv-btn-primary-text-color),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

// link button
$lv-btn-link-color: (default, transparent, transparent, $primary-color), (hover, transparent, transparent, $lv-btn-link-text-color-hover),
  (active, transparent, transparent, $primary-color-active), (disabled, transparent, transparent, $text-color-disabled) !default;

// 危险按钮-默认
$lv-btn-danger-color: (default, $error-color, transparent, $error-color), (hover, $error-color-hover, transparent, $error-color-hover),
  (active, $error-color-active, transparent, $error-color-active),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

// 危险按钮-主要
$lv-btn-danger-primary-color: (default, $error-color, $error-color, $lv-btn-primary-text-color),
  (hover, $error-color-hover, $error-color-hover, $lv-btn-primary-text-color),
  (active, $error-color-active, $error-color-active, $lv-btn-primary-text-color),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

// 危险按钮-link
$lv-btn-danger-link-color: (default, transparent, transparent, $error-color), (hover, transparent, transparent, $error-color-hover),
  (active, transparent, transparent, $error-color-hover), (disabled, transparent, transparent, $text-color-disabled) !default;

/******************** 组件 ********************/
.lv-button {
  display: inline-block;
  padding: 0 $padding-md;
  overflow: visible \0;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: 0;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;
  cursor: pointer;

  @include motion-state;

  transition-property: none;

  .lv-icon-loading-box {
    display: inline-flex;
    align-items: center;
  }

  > span {
    display: inline-block;
    line-height: $line-height-coeff;
    vertical-align: middle;
  }

  .lv-icon-host {
    vertical-align: middle;
    pointer-events: none;
  }

  &:disabled,
  &[disabled] {
    .lv-icon-host {
      color: $icon-color-disabled;
    }
  }

  // 图标和文本间距
  & > .lv-icon-host + span,
  & > span + .lv-icon-host {
    margin-left: $margin-xs;
  }

  // 大小
  &.lv-button-size-default,
  &.lv-button-size-large {
    min-width: 0.96rem;
  }

  &.lv-button-size-default {
    height: $height-base;
  }

  &.lv-button-size-large {
    height: $height-lg;
    font-size: $font-size-lg;
    line-height: $line-height-lg;
  }

  &.lv-button-size-small {
    min-width: 0.6rem;
    height: $height-sm;
  }

  &.lv-button-size-auto {
    height: $height-base;
  }

  &.lv-button-type-link {
    &.lv-button-size-default,
    &.lv-button-size-large,
    &.lv-button-size-small {
      min-width: auto;
      height: auto;
      font-size: $font-size-base;
      line-height: 0.22rem;
    }
  }

  &.lv-button-no-border {
    border: none;
  }
}

// 默认按钮
@include buttonColorState('.lv-button.lv-button-type-default:not(.lv-button-loading)', $lv-btn-default-color);

.lv-button.lv-button-type-default {
  .lv-icon-host {
    color: $icon-color;
  }

  &:hover {
    .lv-icon-host {
      color: nth(nth($lv-btn-default-color, 2), 4);
    }
  }

  &:active {
    .lv-icon-host {
      color: nth(nth($lv-btn-default-color, 3), 4);
    }
  }

  &:disabled,
  &[disabled] {
    .lv-icon-host {
      color: $icon-color-disabled;
    }
  }
}

// 主按钮
@include buttonColorState('.lv-button.lv-button-type-primary:not(.lv-button-loading)', $lv-btn-primary-color);

.lv-button.lv-button-type-primary {
  .lv-icon-host {
    color: currentColor;
  }
}

// 链接按钮
@include buttonColorState('.lv-button.lv-button-type-link:not(.lv-button-loading)', $lv-btn-link-color);

.lv-button.lv-button-type-link {
  padding: 0;
  background: none;
  border-color: $lv-btn-type-link-border-color;

  .lv-icon-host {
    color: currentColor;
  }
}

// 危险按钮
@include buttonColorState('.lv-button.lv-button-type-default.lv-button-dangerous:not(.lv-button-loading)', $lv-btn-danger-color);
@include buttonColorState('.lv-button.lv-button-type-primary.lv-button-dangerous:not(.lv-button-loading)', $lv-btn-danger-primary-color);
@include buttonColorState('.lv-button.lv-button-type-link.lv-button-dangerous:not(.lv-button-loading)', $lv-btn-danger-link-color);

.lv-button.lv-button-dangerous {
  .lv-icon-host {
    color: currentColor;
  }

  &.lv-button-type-default {
    &:hover {
      .lv-icon-host {
        color: nth(nth($lv-btn-danger-color, 2), 4);
      }
    }

    &:active {
      .lv-icon-host {
        color: nth(nth($lv-btn-danger-color, 3), 4);
      }
    }

    &:disabled,
    &[disabled] {
      .lv-icon-host {
        color: $icon-color-disabled;
      }
    }
  }

  &.lv-button-type-link {
    padding: 0;
    background: none;
    border-color: $lv-btn-type-link-border-color;

    .lv-icon-host {
      color: currentColor;
    }
  }
}

// loading
.lv-button-loading {
  cursor: not-allowed;
  opacity: 0.5;

  .lv-icon-loading {
    margin-right: $margin-xs;
    vertical-align: middle;

    @include icon-size-md;
  }

  &.lv-button-type-default {
    color: $text-color;
    background-color: $lv-btn-type-default-bg-color;
    border-color: $border-color-secondary;

    .lv-icon-host {
      color: $icon-color;
    }
  }

  &.lv-button-type-primary {
    color: $lv-btn-primary-text-color;
    background: $primary-color;
    border-color: $primary-color;

    .lv-icon-host {
      color: $lv-btn-primary-text-color;
    }
  }

  &.lv-button-type-link {
    color: $primary-color;
    background: none;
    border-color: $lv-btn-type-link-border-color;

    .lv-icon-host {
      color: $primary-color;
    }

    .lv-icon-loading {
      @include icon-size;
    }
  }

  &.lv-button-dangerous {
    &.lv-button-type-default {
      color: $error-color;
      background: $lv-btn-dangerous-bg-color;
      border-color: $error-color;

      .lv-icon-host {
        color: $icon-color;
      }
    }

    &.lv-button-type-primary {
      color: $lv-btn-primary-text-color;
      background: $error-color;
      border-color: $error-color;

      .lv-icon-host {
        color: $lv-btn-primary-text-color;
      }
    }

    &.lv-button-type-link {
      color: $error-color;

      .lv-icon-host {
        color: $error-color;
      }
    }
  }
}
